<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商户-分组</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/merchant.css">
</head>

<body>
<div id="uniocn">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title" style="border-bottom:10px solid #eee ">
            <li class="layui-this">商户分组列表</li>
            <li>添加商户分组</li>
        </ul>
        <div class="layui-tab-content" style="padding: 0">
            <div class="layui-tab-item layui-show">
                <p class="add-title">分类列表</p>
                <div style="box-sizing: border-box;padding:15px">
                    <table class="layui-table">
                        <colgroup>
                            <col width="25%">
                            <col width="25%">
                            <col width="25%">
                            <col width="25%">
                        </colgroup>
                        <tr>
                            <th>分组名称</th>
                            <th>是否默认</th>
                            <th>是否开启</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="(item,index) in groupData">
                            <td>
                                <p>{{item.groupingName}}</p>
                            </td>
                            <td>
                                <p>
                                    <button class="layui-btn layui-btn-sm "
                                            :class="[item.default?'gropingActive':'gropingBtn']"
                                            @click='defaultTable(index)'>
                                        {{item.default?'是':'否'}}
                                    </button>
                                </p>
                            </td>
                            <td>
                                <p>
                                    <button class="layui-btn layui-btn-sm "
                                            :class="[item.switch?'gropingActive':'gropingBtn']"
                                            @click='stateuSwitch(index)'>
                                        {{item.switch?'开启':'关闭'}}
                                    </button>
                                </p>
                            </td>
                            <td>
                                <p>
                                    <a href="##" style="color: #467CD4;">编辑</a>
                                    <a href="javascript:;" style="color: #467CD4;" @click='delTable(index)'>删除</a>
                                </p>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="layui-tab-item ">
                <p class="add-title">分类管理</p>
                <form style="padding: 15px" class="layui-form" action="##">
                    <div class="layui-form-item">
                        <label class="layui-form-label">分组名称</label>
                        <div class="layui-input-block" style="width: 40%;display: flex;">
                            <input type="text" name="name" required lay-verify="required" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否默认</label>
                        <div class="layui-input-block">
                            <input type="radio" name="default" value="是" title="是">
                            <input type="radio" name="default" value="否" title="否" checked>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否开启</label>
                        <div class="layui-input-block">
                            <input type="radio" name="switch" value="开启" title="开启">
                            <input type="radio" name="switch" value="关闭" title="关闭" checked>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商户组权限</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="like[write]" title="会员卡" checked>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="alert" style="padding: 15px;display: none;">
    <form class="layui-form" action="##">
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block" style="width: 65%;display: flex;">
                <input type="text" name="title" required lay-verify="required" placeholder="输入微信昵称或openid或uid"
                       autocomplete="off" class="layui-input">
                <button type="button" class="layui-btn layui-btn-primary">搜索</button>
            </div>
        </div>
        <div class="layui-form-item" style="display: flex;align-items: center">
            <label class="layui-form-label"></label>
            <ul>
                <li>11</li>
                <li>11</li>
                <li>11</li>
            </ul>
        </div>
    </form>
</div>
<script src="layui/layui.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/vue2.5.16.js"></script>
<script src="./js/public.js"></script>
<script src="./js/data.js"></script>
<script>
    new Vue({
        el: "#uniocn",
        data: {
            header: data.header,
            side: data.side,
            groupData: [
                {groupingName: "八戒", default: true, switch: false}
            ]
        },
        methods: {
            // 状态切换
            stateuSwitch: function (index) {
                this.groupData[index].switch = !this.groupData[index].switch
            },
            // 默认
            defaultTable: function (index) {
                this.groupData[index].default = !this.groupData[index].default
            },
            // 编辑
            editTable: function (index) {

            },
            //删除
            delTable: function (index) {
                var that = this;
                layer.confirm('确定删除吗?', {
                    btn: ['确认', '取消'] //按钮
                }, function () {
                    that.groupData.splice(index, 1)
                    layer.msg('删除成功', {icon: 1});
                }, function () {
                    layer.msg('取消了删除', {icon: 0});
                });
            }
        }
    })
    layui.use(['layer', 'form'], function () {
        var form = layui.form;
        var layer = layui.layer;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
    $('.chooseWX').click(function () {
        layer.open({
            title: "选择微信账号",
            type: 1,
            area: ['720px'], //宽高
            content: $('.alert'),
            btn: "关闭"
        });
    })
</script>
</body>

</html>